<template>
  <view class="audit-wrap">
    <back :back-title="backTitle" class="back"></back>
    <!-- <scroll-view class="list-wrap"> -->
      <view class="input-list">
        <view class="item">
          <image src="/static/images/common/first.png"></image>
          <view class="title">申请人</view>
          <view class="input">{{userName}}</view>
        </view>
        <view class="item">
					<view class="dot"></view>
          <view class="title">申请日期</view>
          <view class="input">{{info.leaveCreateTime ? parseTimeFuc(info.leaveCreateTime).substring(0, 10) : ''}}</view>
        </view>
        <view class="item">
					<view class="dot"></view>
          <view class="title">请假类型</view>
					<picker @change="bindPickerChangeType" :value="typeIndex" :range="type" mode="selector" class="picker-type">
						<view class="uni-input">{{type[typeIndex]}}</view>
					</picker>
        </view>
				<view class="item">
					<view class="dot"></view>
				  <view class="title">请假时间</view>
					<view class="input" @click="handleStartDate">{{startLeaveDate}}</view>
				</view>
				<view class="item">
					<view class="dot"></view>
				  <view class="title">结束时间</view>
					<view class="input" @click="handleEndDate">{{endLeaveDate}}</view>
				</view>
				<view class="item">
					<view class="dot"></view>
				  <view class="title">请假时长</view>
					<view class="input">{{info.leaveDuration}}小时</view>
				</view>
        <view class="textarea-item">
          <view class="dot"></view>
          <view class="title-wrap">
            <view class="title">请假事由</view>
            <textarea v-model="info.leaveContent" class="textarea" :auto-height="true" placeholder="请输入请假理由" :maxlength="-1"></textarea>
            <up-load :isChoose.sync="isChoose"></up-load>
          </view>
          <image src="/static/images/leave/add-photo.png" @click.stop="handleUploadImg"></image>
        </view>
      </view>
			<view class="button-wrap">
				<common-button @submit="handleSubmit"></common-button>
			</view>
    <!-- </scroll-view> -->
		<w-picker
			class="w-picker"
			mode="dateTime" 
			startYear="2019" 
			endYear="2030"
			step="1"
			:defaultVal="[1,1,1,1,2,5]" 
			:current="true" 
			@confirm="onConfirm" 
			ref="dateTime" 
			themeColor="#f00"
		></w-picker>
  </view>
</template>
<script>
import upLoad from '../../../../components/upload-img/index'
import commonButton from '../../../../components/button/index'
import {parseTime} from '../../../../utils/index'
import {mapGetters} from 'vuex'
import wPicker from "../../../../components/w-picker/w-picker";
import {audit} from '../../../../api/leave'
export default {
  name: 'audit',
  components: {
    upLoad,
    commonButton,
		wPicker
  },
	created() {
		this.initDate()
	},
  data() {
    return {
      backTitle: '请假申请',
      type: ['事假', '病假'],
      info: {
        userId: '',
        leaveCreateTime: 0,
        leaveType: 1,
        leaveStartTime: 0,
        leaveEndTime: 0,
        leaveDuration: '',
				leaveContent: '',
				leavePhoto: ''
      },
			userName: '',
      url: [],
      isChoose: 0,
			typeIndex: 0,
			parseTimeFuc: parseTime,
      leaveDate: '' ,//请假时长，
      startLeaveDate: '',// 开始前时间
      endLeaveDate: '',//结束请假时间
			startNow: 0, //毫秒数
			endNow: 0,
      mode:"dateTime",
			isStart: false,
			flag: true
    }
  },
	computed:{
		...mapGetters(['uploadImg'])
	},
	watch: {
		startNow(val) {
			if(this.endNow - val < 0) {
				uni.showToast({
					title: '开始时间不能大于结束时间',
					icon: 'none'
				})
				this.flag = false
			} else {
				this.flag = true
				const date = Math.ceil((this.endNow - val) / (60 * 60 * 1000))
				this.info.leaveStartTime = date
				this.info.leaveDuration = date
			}
		},
		endNow(val) {
			if(val - this.startNow < 0) {
				uni.showToast({
					title: '结束时间不能小于开始时间',
					icon: 'none'
				})
				this.flag = false
			} else {
				this.flag = true
				this.info.leaveEndTime = val
				const date = Math.ceil((val -this.startNow) / (60 * 60 * 1000))
				this.info.leaveDuration = date
			}
		}
	},
  methods: {
		initDate(){
			const userInfo = uni.getStorageSync('USER_INFO')
			this.userName = JSON.parse(userInfo).userName
			this.info.userId = JSON.parse(userInfo).userId
			const now = +new Date()
      this.info.leaveCreateTime = now
			this.startLeaveDate = parseTime(now)
      const end = now + 24*60*60*1000
			this.endLeaveDate = parseTime(end)
			this.startNow = now
			this.endNow = end
		},
    handleUploadImg() {
			this.isChoose++
    },
		async handleSubmit() {
			if (!this.flag) {
				uni.showToast({
					title: '请检查请假时间',
					icon: 'none'
				})
				return
			} else {
				if(this.info.leaveContent.length === 0) {
					uni.showToast({
						title: '请理由不能为空',
						icon: 'none'
					})
				} else {
					const result = []
					console.log(...this.uploadImg)
					this.uploadImg.map((item) => {
						if(item.path !== '' && item.isUpload) {
							result.push(item.path)
						}
					})
					this.info.leavePhoto = result.length ? result.join(',') : ''
					uni.showToast({
						title: '提交中',
						icon: 'none'
					})
					await audit({...this.info})
					uni.showToast({
						title: '提交成功',
					})
					uni.navigateTo({
						url: '/pages/leave/index'
					})
				}
			}
    },
    bindPickerChangeType(e) {
			const {value} = e.detail
			this.typeIndex = Number(value)
			if(Number(value) === 1) {
				this.info.leaveType = 2
			} else {
				this.info.leaveType = 1
			}
    },
    bindDateChange(e) {
      const {value} = e.detail
      this.leaveDate = value
    },
		onConfirm(e) {
			const {result, checkArr} = e
			const d = new Date()
			const year = Number(checkArr[0])
			const month = Number(checkArr[1]) - 1
			const day = Number(checkArr[2])
			const houer = Number(checkArr[3])
			const min = Number(checkArr[4])
			const sec = Number(checkArr[5])
			d.setFullYear(year,month,day)
			d.setHours(houer,min,sec)
			if(this.isStart) {
				this.startLeaveDate = result
				this.startNow = d.getTime()
			} else {
				this.endLeaveDate = result
				this.endNow = d.getTime()
			}
		},
		handleStartDate() {
			this.$refs['dateTime'].show();
			this.isStart = true
		},
		handleEndDate() {
			this.$refs['dateTime'].show();
			this.isStart = false
		}
  }
}
</script>
<style lang="scss" scoped>
.audit-wrap{
  width: 100%;
  min-height: 100vh;
  .back{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }
  .list-wrap{
    width: 100%;
    height: calc(100vh - 157upx);
  }
  .input-list{
    width: 100%;
    padding: 178upx 20upx 20upx;
    box-sizing: border-box;
  }
  .item{
    width: 100%;
    height: 112upx;
    border:2upx solid rgba(225,225,225,1);
    border-radius:56upx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20upx;
    .dot {
      width:16upx;
      height:16upx;
      border-radius:8upx;
      margin-left: 48upx;
      margin-right: 48upx;
    }
    .title{
      width: 150upx;
      font-size: 30upx;
      color: #999;
    }
    image {
      width:83upx;
      height:83upx;
      margin: 0 30upx;
    }
    .input{
      flex: 1;
      padding-right: 10upx;
      box-sizing: border-box;
      margin-left: 50upx;
      font-size: 30upx;
      color: #333;
			overflow: hidden;
    }
    &:nth-of-type(3n+1){
      .dot{
        background-color: #A5E2FF;
      } 
    }
    &:nth-of-type(3n+2){
      .dot{
        background-color: #FFB7B7;
      } 
    }
    &:nth-of-type(3n+3){
      .dot{
        background-color: #FFDAA1;
      }
    }
  }
  .textarea-item{
    width: 100%;
    border:2upx solid rgba(225,225,225,1);
    border-radius:42upx;
    display: flex;
    justify-content: space-between;
    padding-right: 48upx;
    padding-bottom: 42upx;
    margin-bottom: 20upx;
    box-sizing: border-box;
    overflow: hidden;
		position: relative;
    .dot{
      width: 16upx;
      height:16upx;
      border-radius: 50%;
      background-color: #A5E2FF;
      margin-left: 48upx;
      margin-right: 48upx;
      margin-top: 48upx;
    }
    .title-wrap{
      flex: 1;
      .title{
        font-size: 30upx;
        color: #999;
        line-height: 118upx;
        margin-bottom: 4upx;
      }
      .textarea{
        display: block;
        width: 100%;
				min-height:100upx;
        margin-bottom: 30upx;
      }
    }
    image{
			position: absolute;
			top: 20upx;
			right:48upx;
      width: 126upx;
      height: 60upx;
    }
  }
}
.button-wrap{
	padding: 20upx;
	box-sizing: border-box;
	width: 100%;
}
.picker-type{
	flex: 1;
	display: flex;
	align-items: center;
	margin-left: 20upx;
}
.uni-input{
	width: 300upx;
	overflow: hidden;
	font-size: 30upx;
	color: #333;
}
</style>
